﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<title>登录 | {$system_name}</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!--图标-->
	<link rel="stylesheet" type="text/css" href="{_INDEX_STATIC_}/login/css/font-awesome.min.css">

	<!--布局框架-->
	<link rel="stylesheet" type="text/css" href="{_INDEX_STATIC_}/login/css/util.css">

	<!--主要样式-->
	<link rel="stylesheet" type="text/css" href="{_INDEX_STATIC_}/login/css/main.css">

	<!-- js 动作 -->
	<script src="{_INDEX_STATIC_}/lib/jquery/jquery.js"></script>
	<script src="{_INDEX_STATIC_}/lib/layer/layer.js"></script>

</head>

<body>

	<div class="login">
		<div class="container-login100">
			<div class="wrap-login100">
				<div class="login100-pic js-tilt" data-tilt>
					<img src="{_INDEX_STATIC_}/login/img/img-01.png" alt="IMG">
				</div>

				<div class="login100-form validate-form">
					<span class="login100-form-title">
						登录
					</span>

					<div class="wrap-input100 validate-input">
						<input id="account" class="input100" type="text" placeholder="请输入账号">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-user" aria-hidden="true"></i>
						</span>
					</div>

					<div class="wrap-input100 validate-input">
						<input id="password" class="input100" type="password" placeholder="请输入密码">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-lock" aria-hidden="true"></i>
						</span>
					</div>

					<div class="wrap-input100 validate-input" style="position: relative;">
						<input id="captcha" class="input100" type="text" placeholder="请输入验证码" style="width: 65%;">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-image" aria-hidden="true"></i>
						</span>
						<img id="captcha_src" src="{:url('login/verify')}"
							style="width: 35%;height: 45px; position: absolute;right: 0;top:0;">
					</div>

					<div class="container-login100-form-btn">
						<button class="login100-form-btn" id="login">
							登录
						</button>
					</div>

					<div class="text-center p-t-12">
						<!-- <a class="txt2" href="{_INDEX_STATIC_}/login/javascript:">
							忘记密码？
						</a> -->
					</div>

					<div class="text-center p-t-40">
						{if condition="$registered"}
						<a class="txt2" href="{:url('Login/register')}">
							还没有账号？立即注册
							<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
						</a>
						{/if}
					</div>

				</div>
			</div>
		</div>
	</div>

	<script>

		// 登录
		$("#login").on('click', function () {

			var account = $('#account').val().trim();
			var password = $('#password').val().trim();
			var captcha = $('#captcha').val().trim();

			if (account == '') {
				return layer.msg('账号不能为空', { icon: 2, time: 900 });
			}
			if (password == '') {
				return layer.msg('密码不能为空', { icon: 2, time: 900 });
			}
			if (captcha == '') {
				return layer.msg('验证码不能为空', { icon: 2, time: 900 });
			}

			$.ajax({
				url: "{:url('login/login')}",
				data: {
					'account': account,
					'password': password,
					'captcha': captcha
				},
				type: "POST",
				dataType: "JSON",
				success: function (res) {
					// 返回结果处理
					if (res.code == 0) {
						layer.msg(res.msg, { icon: 1, time: 900 }, function () {
							window.location.href = "{:url('index/index')}";
						});
					} else {
						layer.msg(res.msg, { icon: 2, time: 900 }, function () {
							refresh_verification_code();
						});
					}
				}
			});

		});

		// 刷新验证码
		$("#captcha_src").bind("click", function () {
			refresh_verification_code();
		});

		// 刷新验证码
		function refresh_verification_code() {
			var timestamp = Date.parse(new Date());
			$("#captcha_src").attr("src", "{:url('login/verify')}?t=" + timestamp);
			$("#captcha").val('');
		}

	</script>
</body>

</html>